<script lang="ts" setup>
import type { CSSProperties } from 'vue';
import { computed } from 'vue';

import type { SvgIconProps } from './props';

defineOptions({ name: 'SvgIcon' });

const props = withDefaults(defineProps<SvgIconProps>(), {
  prefix: 'icon',
  size: 16,
  spin: false,
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);

const getStyle = computed((): CSSProperties => {
  const { size } = props;
  let s = `${size}`;
  s = `${s.replace('px', '')}px`;
  return {
    width: s,
    height: s,
  };
});
</script>

<template>
  <svg class="svg-icon" :class="[$attrs.class, spin && 'svg-icon-spin']" :style="getStyle" aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<style lang="less" scoped>
.svg-icon {
  display: inline-block;
  overflow: hidden;
  fill: currentcolor;
  vertical-align: -0.15em;
}

.svg-icon-spin {
  animation: loadingCircle 1s infinite linear;
}
</style>
